<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4">
			<x-alert type="danger" v-if="form.message && form.examine === 3" :closed="false">{{ form.message
				}}</x-alert>
			<view class="bg-white rounded-4 p-4 flex flex-column grid-gap-4">
				<view class="flex flex-column grid-gap-2 p-2">
					<text class="h9 text-grey text-nowrap">{{WebConfigStore.replaceIndustryPersonnelName('技师图片')}}({{ form.thumb.length }}/9)</text>
					<x-uploads v-model="form.thumb" keyName="url" :limit="9" fill :margins="80" :remove="removeThumb"
						:disbale="formDisabled"></x-uploads>
				</view>
				<view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg">
					<view class="h9 text-grey text-nowrap">年龄</view>
					<input type="number" placeholder="请输入年龄" class="flex-1 text-right font-weight-600 h9" v-model="form.age"
						maxlength="2" :disabled="formDisabled">
				</view>
				<view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg">
					<view class="h9 text-grey text-nowrap">手机号码</view>
					<input type="tel" placeholder="请输入手机号码" class="flex-1 text-right font-weight-600 h9" v-model="form.mobile"
						maxlength="11" :disabled="formDisabled">
				</view>
				<view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg">
					<view class="h9 text-grey text-nowrap">工作经验</view>
					<input type="number" placeholder="请输入工作经验" class="flex-1 text-right font-weight-600 h9" v-model="form.work_meet"
						maxlength="2" :disabled="formDisabled">
					<view class="font-weight-600 h9">年</view>
				</view>
				<view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg" @tap="!formDisabled && xRegionsRef.show({
						level: 1
					})">
					<view class="h9 text-grey text-nowrap">意向城市</view>
					<view class="flex-1 flex flex-x-flex-end">
						<text v-if="form.city_id" class="font-weight-600 h9 text-break-all text-wrap">{{ form.province }} {{ form.city }}</text>
						<text class="text-placeholder font-weight-600 h9" v-else> 请选择城市 </text>
					</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg" @tap=" !formDisabled && (genderShow=true)">
					<view class="h9 text-grey text-nowrap">性别</view>
					<view class="flex-1 flex flex-x-flex-end">
						<text v-if="form.gender" class="font-weight-600 h9 text-break-all text-wrap">{{ form.gender_text }}</text>
						<text class="text-placeholder font-weight-600 h9" v-else> 请选择性别 </text>
					</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex flex-column grid-gap-2 p-2"
					v-if="WEBCONFIG && WEBCONFIG.technician_qualifications && WEBCONFIG.technician_qualifications.length > 0">
					<text class="h9 text-grey text-nowrap">
						从业资质({{ form.qualifications.length }}/{{ WEBCONFIG.technician_qualifications.length }})</text>
					<x-uploads v-model="form.qualifications" keyName="url"
						:limit="WEBCONFIG.technician_qualifications.length+1" fill :margins="80"
						:disbale="formDisabled" :remove="removeQualifications"></x-uploads>
					<text class="h9 text-grey">需要上传证书：{{ WEBCONFIG.technician_qualifications.join('、') }}</text>
				</view>
			</view>

			<view class="flex">
				<template v-if="form.examine == 0">
					<button class="flex-1 btn-dark-light-3 btn-round" disabled>审核中</button>
				</template>
				<template v-else>
					<button class="flex-1 btn-primary btn-round" @click="submit()">保存</button>
				</template>
			</view>
		</view>

		<!-- 选择意向城市 -->
		<x-regions ref="xRegionsRef" @selected="selectedRegions" />

		<!-- 选择性别 -->
		<x-picker v-model:show="genderShow" v-model="form.gender" keyName="name"
			:columns="[[{ name: '男', value: 'man' }, { name: '女', value: 'woman' }]]" confirmColor="var(--xl-primary)"
			@confirm="genderConfirm">
		</x-picker>
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick, computed,onBeforeUnmount } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { $api,  $message,$page } from "@/utils";
import { useMap } from "@/utils/map";
import { useUserStore, useWebConfigStore, useRefs } from "@/stores";
import { $EventName } from "@/utils/const/env";
const UserInfoStore = useUserStore();
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
let map: any;
const genderShow = ref(false);
const mch = ref(null);
const xRegionsRef = ref();
const form = ref({
	age: '',
	mch_id: '',
	thumb: [],
	qualifications: [],
	province_id: "",
	province: '',
	city_id: "",
	city: '',
	gender: '',
	gender_text: "",
	mobile: "",
	name: "",
	examine: null,
	work_meet: "",
	message: "",
	latitude: "",
	longitude: "",
});
const formDisabled = computed(() => {
	return form.value.examine === 0;
})
const getLocation = () => {
	if (!map.isReady()) { return; }
	map.getCurrentPosition().then((result: any) => {
		form.value.latitude = result.position.lat
		form.value.longitude = result.position.lng
	}).catch(() => {
	});
}
const getInfo = () => {
	if (!UserInfoStore.hasLogin()) return;
	$api.Technician.info().then((data: any) => {
		form.value = data;
	}).catch(() => { })
}
const submit = () => {
	map.getCurrentPosition().then((result: any) => {
		form.value.latitude = result.position.lat
		form.value.longitude = result.position.lng
	}).catch(() => {
	});
	$api.Technician.apply(form.value).then((res: any) => {
		$message.success(res.msg);
		getInfo();
	}).catch((err: any) => {
		$message.error(err.msg);
	})
}
const selectedRegions = (value: any) => {
	form.value.province_id = value.province_id;
	form.value.province = value.province;
	form.value.city_id = value.city_id;
	form.value.city = value.city;
}
const genderConfirm = (e: any) => {
	form.value.gender_text = e.name;
}
const removeThumb = (item: any, index: number) => {
	return new Promise((resolve, reject) => {
		if (form.valueDisabled) return reject();
		uni.showModal({
			title: '删除图片',
			content: '确定删除图片吗？',
			success: (res: any) => {
				if (res.confirm) {
					if (item.id) {
						$api.Technician.deleteTechnicianImage({
							name: 'thumb',
							id: item.id
						}).then(() => {
							resolve(true);
						}).catch((err: any) => {
							$message.error(err.msg);
							reject();
						})
					} else {
						resolve(true);
					}
				} else {
					reject();
				}
			}
		})
	})
}
const removeQualifications = (item: any, index: number) => {
	return new Promise((resolve, reject) => {
		if (form.valueDisabled) return reject();
		uni.showModal({
			title: '删除图片',
			content: '确定删除图片吗？',
			success: (res: any) => {
				if (res.confirm) {
					if (item.id) {
						$api.Technician.deleteTechnicianImage({
							name: 'qualifications',
							id: item.id
						}).then(() => {
							resolve(true);
						}).catch((err: any) => {
							$message.error(err.msg);
							reject();
						})
					} else {
						resolve(true);
					}
				} else {
					reject();
				}
			}
		})
	})
}
const useInitMap = () => {
	map = useMap(() => {
		nextTick(() => {
			getLocation();
		})
	});
}

onLoad((options: any) => {
	useInitMap()
	uni.$once($EventName.WEBCONFIG_READY, useInitMap)
	if (options.mch_id) {
		$api.Mch.details(options.mch_id).then((data: any) => {
			mch.value = data;
			form.value.mch_id = options.mch_id;
		})
	}
	getInfo();
})

onBeforeUnmount(()=>{
	uni.$off($EventName.WEBCONFIG_READY, useInitMap)
})
</script>
